<template>
  <div class="wrapper">
    <div id="waterChart"></div>
    <div id="waterChartTwo"></div>
  </div>
</template>
<script>

import * as echarts from 'echarts'
import { waterChart } from "@/api/user/api";
import 'echarts-liquidfill'
export default {
  data() {
    return {
      charts: null,
      chartsTo: null,
      dataList:[],
      views:0,
      collect:0,
    }
  },

  mounted() {
    this.init()
    this.getList()
  },
  methods: {
    init() {
      this.charts = echarts.init(document.getElementById('waterChart'))
      this.chartsTo = echarts.init(document.getElementById('waterChartTwo'))
    },
    getList() {
      waterChart().then(res => {
        let data=res.data
       
        this.dataList=data.dataList
        this.resfilter()
        this.initChart1()
        this.initChart2()
      })
    },

    initChart1() {
      // 创建echarts实例  获取要展示的区域

      let option = {
        animation: false,
        backgroundColor: '#fff',
        grid: {
          // 让图表占满容器
          top: '35%',
          left: '0%',
          right: '0%',
          bottom: '0%'
        },
        title: [
          {
          text: "女性服装比较",
          textStyle: {
            fontWeight: "normal",
            fontSize: 16
          },
          left: "left",
          top: "0%"
        },
          {
            text: this.views + '%',
            textStyle: {
              fontSize: 24,
              fontFamily: 'Microsoft Yahei',
              fontWeight: 'normal',
              color: '#0046AE'
            },
            x: 'center',
            y: '42%'
          },
          {
            text: `浏览量(${this.views})`,
            left: 'center',
            top: '88%',
            textStyle: {
              fontSize: 16,
              fontWeight: '400',
              color: '#2674E9'
            }
          }
        ],
        series: [
          {
            z: 1,
            type: 'pie',
            radius: '71%',
            center: ['50%', '50%'],
            hoverAnimation: false,
            label: {
              show: false
            },
            labelLine: {
              show: false
            },
            color: 'rgba(255,255,255,0)',
            data: [100],
            itemStyle: {
              borderWidth: 2,
              borderColor: 'rgba(152, 158, 170,.2)'
            }
          },
          {
            z: 2,
            type: 'pie',
            radius: '63%',
            center: ['50%', '50%'],
            hoverAnimation: false,
            label: {
              show: false
            },
            labelLine: {
              show: false
            },
            color: 'rgba(255,255,255,0)',
            data: [100],
            itemStyle: {
              borderWidth: 2,
              borderColor: 'rgba(38, 116, 233,.4)'
            }
          },
          {
            type: 'liquidFill',
            z: 3,
            radius: '58%',
            center: ['50%', '50%'],
            //  shape: 'roundRect',
            data: [this.views/100,this.views/100],
            itemStyle: {
              shadowBlur: 0
            },
            outline: {
              borderDistance: 5,
              itemStyle: {
                shadowBlur: 0,
                borderWidth: 4,
                borderColor: '#2674E9'
              }
            },
            backgroundStyle: {
              borderWidth: 2,
              borderColor: '#fff',
              color: '#fff'
            },
            color: [
              {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 1,
                    color: 'rgba(20, 146, 255, 0.2)' //下
                  },
                  {
                    offset: 0,
                    color: 'rgba(20, 146, 255, 0.2)'
                  }
                ],
                globalCoord: false
              },
              {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 1,
                    color: 'rgba(38, 116, 233, .7)' //下
                  },
                  {
                    offset: 0,
                    color: 'rgba(38, 116, 233, .44)'
                  }
                ],
                globalCoord: false
              }
            ],
            label: {
              normal: {
                formatter: ''
              }
            }
          }
        ]
      }
      window.addEventListener('resize', () => {
        this.charts.resize()
      })
      this.charts.setOption(option)
    },
    initChart2() {
      // 创建echarts实例  获取要展示的区域
      let option = {
        animation: false,
        backgroundColor: '#fff',
        grid: {
          // 让图表占满容器
          top: '-35%',
          left: '0%',
          right: '0%',
          bottom: '0%'
        },
        title: [
          {
            text: this.collect+'%',
            textStyle: {
              fontSize: 24,
              fontFamily: 'Microsoft Yahei',
              fontWeight: 'normal',
              color: '#BE6A0A'
            },
            x: 'center',
            y: '42%'
          },
          {
            text: `收藏量(${this.collect})`,
            left: 'center',
            top: '88%',
            textStyle: {
              fontSize: 16,
              fontWeight: '400',
              color: '#FEAF55'
            }
          }
        ],
        series: [
          {
            z: 1,
            type: 'pie',
            radius: '71%',
            center: ['50%', '50%'],
            hoverAnimation: false,
            label: {
              show: false
            },
            labelLine: {
              show: false
            },
            color: 'rgba(255,255,255,0)',
            data: [100],
            itemStyle: {
              borderWidth: 2,
              borderColor: 'rgba(152, 158, 170,.2)'
            }
          },
          {
            z: 2,
            type: 'pie',
            radius: '63%',
            center: ['50%', '50%'],
            hoverAnimation: false,
            label: {
              show: false
            },
            labelLine: {
              show: false
            },
            color: 'rgba(255,255,255,0)',
            data: [100],
            itemStyle: {
              borderWidth: 2,
              borderColor: 'rgba(254, 175, 85,.4)'
            }
          },
          {
            type: 'liquidFill',
            z: 3,
            radius: '58%',
            center: ['50%', '50%'],
            //  shape: 'roundRect',
            data: [this.collect/100, this.collect/100],
            itemStyle: {
              shadowBlur: 0
            },
            outline: {
              borderDistance: 5,
              itemStyle: {
                shadowBlur: 0,
                borderWidth: 4,
                borderColor: '#FEAF55'
              }
            },
            backgroundStyle: {
              borderWidth: 2,
              borderColor: '#fff',
              color: '#fff'
            },
            color: [
              {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 1,
                    color: 'rgba(254, 175, 85, 0.2)' //下
                  },
                  {
                    offset: 0,
                    color: 'rgba(254, 175, 85, 0.2)'
                  }
                ],
                globalCoord: false
              },
              {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 1,
                    color: 'rgba(254, 175, 85, .7)' //下
                  },
                  {
                    offset: 0,
                    color: 'rgba(254, 175, 85, .44)'
                  }
                ],
                globalCoord: false
              }
            ],
            label: {
              normal: {
                formatter: ''
              }
            }
          }
        ]
      }
      window.addEventListener('resize', () => {
        this.chartsTo.resize()
      })
      this.chartsTo.setOption(option)
    },
    resfilter() {
      let sum = this.dataList[0] + this.dataList[1]
      if (sum > 0) {
        this.collect = parseInt((this.dataList[0] / sum) * 100)
        this.views = 100 - this.collect
      }else if(sum==0){
        this.collect = 0
        this.views = 0
      }
      if(this.dataList[0]==0){
        this.collect = 0
      }
      if(this.dataList[1]==0){
        this.views = 0
      }
    }
  }
}
</script>
<style scoped>
.wrapper {
  width: 100%;
  display: flex;
}
#waterChart {
  width: 100%;
  height: 160px;
}
#waterChartTwo {
  width: 100%;
  height: 160px;
}
</style>